<script setup lang="ts">
import {CrowdLabelInterface} from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/CrowdInterface";
import LabelFindListCrowdPanel
  from "~/contentScripts/views/wxt/BatchAddingProducts/components/Crowd/LabelFindListCrowdPanel.vue";
import {WxtBizCode, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";

const props = defineProps({
  value: {
    type: Boolean,
    default: false,
  },
  bizCode: {
    type: String as PropType<WxtBizCode>,
    default: WxtBizCode.关键字推广,
  },
  materialIdList: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  campaignId: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  recSceneList: {
    type: Array as PropType<string[]>,
    default: () => ['recSceneNew'],
  },
});
const emit = defineEmits([
  "update:value",
]);
const crowd = ref<CrowdLabelInterface[]>([]);
const tabs = ref<any[]>(
    [
      {
        title: '人口属性',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000524"
          }
        ],
        value: [],
      },

      {
        title: '身份属性',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000624"
          }
        ],
        value: [],
      },
      {
        title: '消费偏好',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000625"
          }
        ],
        value: [],
      },
      {
        title: '天气属性',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000623"
          }
        ],
        value: [],
      },
      {
        title: '淘宝属性',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000828",
            "showTagList": [],
            "businessType": ""
          },
          {
            "labelId": "3000819",
            "showTagList": [],
            "businessType": ""
          },
          {
            "labelId": "3000820",
            "showTagList": [],
            "businessType": ""
          },
          {
            "labelId": "3000545"
          },
          {
            "labelId": "3000546"
          },
          {
            "labelId": "3000547"
          },
          {
            "labelId": "3000548",
            "showTagList": [],
            "businessType": ""
          }
        ],
        value: [],
      },
      {
        title: '节日属性',
        component: LabelFindListCrowdPanel,
        labelList: [
          {
            "labelId": "3000822",
            "showTagList": [],
            "businessType": ""
          },
          {
            "labelId": "3000823",
            "showTagList": [],
            "businessType": ""
          },
          {
            "labelId": "3000707",
            "showTagList": [],
            "businessType": ""
          },
          {
            "labelId": "3000708"
          },
          {
            "labelId": "3000709"
          },
          {
            "labelId": "3000710"
          },
          {
            "labelId": "3000549"
          },
          {
            "labelId": "3000550",
            "showTagList": [],
            "businessType": ""
          },
          {
            "labelId": "3000551"
          },
          {
            "labelId": "3000552"
          },
          {
            "labelId": "3000553"
          },
          {
            "labelId": "3000645",
            "showTagList": [
              {
                "code": "",
                "color": "",
                "name": "大促专属人群"
              }
            ],
            "businessType": ""
          },
          {
            "labelId": "3000646",
            "showTagList": [
              {
                "code": "",
                "color": "",
                "name": "大促专属人群"
              }
            ],
            "businessType": ""
          },
          {
            "labelId": "3000647",
            "showTagList": [
              {
                "code": "",
                "color": "",
                "name": "大促专属人群"
              }
            ],
            "businessType": ""
          },
          {
            "labelId": "3000694"
          },
          {
            "labelId": "3000695"
          },
          {
            "labelId": "3000696"
          },
          {
            "labelId": "3000697"
          },
          {
            "labelId": "3000698"
          },
          {
            "labelId": "3000699",
            "showTagList": [],
            "businessType": ""
          },
          {
            "labelId": "3000700",
            "showTagList": [],
            "businessType": ""
          }
        ],
        value: [],
      },

    ]
);
watch(() => tabs.value, (val) => {
  // 将所有tab下value合并
  let allValue:any[] = [];
  val.forEach((item: any) => {
    allValue = allValue.concat(item.value);
  });
  emit('update:value', allValue);
}, {
  deep: true,
});
</script>

<template>
  <!--{{tabs}}-->
  <a-tabs size="small" style="margin-top: -10px;">
    <a-tab-pane v-for="(tab, index) in tabs" :key="index" :tab="tab.title">
      <component :is="tab.component" :labelList="tab.labelList" :bizCode="bizCode" :materialIdList="materialIdList"
                 :campaignId="campaignId" :recSceneList="recSceneList" v-model:value="tab.value"
      />
    </a-tab-pane>
  </a-tabs>
</template>

<style scoped>

</style>
